
<template>
    <el-row class="aside-menu">
      <el-col>
        <!-- <el-button @click="isCollapse = !isCollapse">
          <Menu size="small" height="15px"/>
        </el-button> -->
        
          <el-menu 
            v-if="isShowPostion === 'side'"
            active-text-color="#fff"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            v-for="(item) in itemList" :key="item.id"
          >
          <el-menu-item :title="item.name_zh" index="item.id" v-if="item.is_root && (item.child_node == null || item.child_node == '')">
            
            <router-link :to="item.path" style="text-decoration: none">
            <el-icon v-if="item.type === 'element-icon'" ><component class="icon" :is="item.icon" /></el-icon>
            <!-- <template #title > -->
              <span v-if="!isCollapse">{{ item.name_zh }}</span>
            <!-- </template> -->
            </router-link>
          </el-menu-item>
          
          <el-sub-menu  index="item.id" v-if="item.child_node" >
            <template #title >
              <el-icon v-if="item.type === 'element-icon'" ><component class="icon" :is="item.icon" /></el-icon>
              <span v-if="!isCollapse">{{ item.name_zh }}</span>
            </template>
            
            <el-col v-for="sub in item.children" :key="sub.id">
              <el-menu-item :title="sub.name_zh" index="sub.id">
                <router-link :to="sub.path" style="text-decoration: none">
                  <el-icon v-if="sub.type === 'element-icon'" ><component class="icon" :is="sub.icon" /></el-icon>
                  <span>{{ sub.name_zh }}</span>
                </router-link>
              </el-menu-item>
            </el-col>

          </el-sub-menu>
        </el-menu>

        

      </el-col>
  </el-row>
</template>

<script setup>
import { getMenus } from '@/api'
import { ref, onMounted } from 'vue'

let isShowPostion = ref('top')
let itemList = ref(null)
let isCollapse = ref(true)

onMounted(async () => {
  itemList.value = (await getMenus()).data
})

</script>

<style scope>
  .aside-menu {
    position: fixed;
    top: 60px;
    left: 0;
    margin: 0 3px 0 0;
    /* width: 140px; */
    height: 93vh;
    float: left;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);     */
  }
  .aside-menu,
  .el-menu-item,
  .el-sub-menu {
    width: 140px;
    /* background-color: rgb(48, 65, 86); */

  }
  .aside-menu .el-menu {
    background-color: #fff;
  }
  .el-menu-item span,
  .el-sub-menu span,
  .icon {
    width: 160px;
    color: #376eff;
    text-align: center; 
  }
  .el-col .el-menu-item:hover,
  .active {
    background-color: #d1d4eb;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 141px;
    min-height: 40px;
  }

.flex-grow {
  flex-grow: 1;
}

</style>